<!-- 实现一个复合输入框，在外层输入完code后，返回code和text -->
<template>
  <div class="complex-input-wrapper">
    <el-input placeholder="请输入名称" v-model="innerText" class="input-with-input">
      <el-input v-model="innerValue" slot="prepend" placeholder="请输入代码">
      </el-input>
    </el-input>
    <el-dialog></el-dialog>
  </div>
</template>
<script>

const options = [
  {
    value: 'shanghai',
    label: '上海'
  }, {
    value: 'beijing',
    label: '北京'
  },
  {
    value: 'chengdu',
    label: '成都'
  }, {
    value: 'shenzhen',
    label: '深圳'
  }, {
    value: 'guangzhou',
    label: '广州'
  }, {
    value: 'dalian',
    label: '大连'
  }]
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      innerValue: '',
      innerText: '',
      options: options,
      debounce: null
    }
  },
  methods: {
    updateValue() {
      if (this.debounce) {
        clearTimeout(this.debounce)
      }
      this.debounce = setTimeout(() => {
        console.log(this.innerValue)
        const obj = this.options.find(e => this.innerValue && e.value.startsWith(this.innerValue))
        if (obj) {
          // 这里一定要给这两个值赋值，因为外层看到的值，其实是内层绑定的值
          this.innerText = obj.label
          this.innerValue = obj.value
        } else {
          this.innerText = ''
          this.innerValue = ''
        }
        this.$emit('update:text', this.innerText)
        this.$emit('update:value', this.innerValue)
      }, 500)
    }
  },
  watch: {
    innerValue(val) {
      this.updateValue()
    },
    innerText(val) {
      this.updateValue()
    }
  }
}
</script>

<style scoped lang="scss">

.complex-input-wrapper {
  ::v-deep .el-input-group__prepend {
    width: 40%;
  }

  ::v-deep input:first-child {
    width: 100%;
  }

  ::v-deep .input-with-input .el-input-group__prepend {
    background-color: #fff;
    padding: 0 !important;
    border: 0;
  }
}


</style>
